Présentation du projet 'Atelier Tudors'
Voici la présentation d'un projet fictif crée pour les besoins d'une formation en Concepteur Designer UI. Ce projet a été conçu, crée et réalisé en 6 mois. Ci-dessous, je vous présente mon projet fictif : "Atelier Tudors, le goût du raffinement ".
Qu'est-ce que le projet "Atelier Tudors" ?
Atelier Tudors est une entreprise qui vend des gâteaux et pâtisseries artisanales. L'entreprise met en avant un savoir faire, un artisanat mais aussi des gâteaux et pâtisseries faites avec de bons produits locaux et issu du circuit court. L'artisanat, la tradition et l'authenticité sont au cœur des préoccupations de l'entreprise. L'entreprise souhaite avoir un site web pour promouvoir ses produits et l'option de click & collect.
MOODBOARD
Voici le moodboard (ou planche tendance) que j'ai créé. On y voit les produits que vend l'entreprise. Un badge qui indique le 100% local et 100% naturel qui font partis des valeurs de l'entreprise. Le badge circuit court qui valorise les produits locaux ainsi que les mots "artisanat", "savoir faire" et "bon & bio" qui sont trois mots qui résument ce que la marque promeut. On retrouve également un fouet qui représente la pâtisserie. Une photo de la boutique est également présente pour représenter l'entreprise et sa boutique physique. Les couleurs proposées sont des couleurs dans les tons chaud et pastel pour rappeler le raffinement, la convivialité pour le jaune et la tradition pour le marron.
LOGO & DÉCLINAISONS
Voici le logo créé pour les besoins du projet. Nous avons un cercle, qui représente la forme de certains gâteaux, dans lequel se croisent deux ustensiles utilisés en pâtisseries pour représenter cette dernière. Il y a une version marron et une version jaune. Le marron a été choisi car il représente la tradition et l'authenticité. Le jaune, quant à lui, a été choisi car il représente l'énergie, la convivialité. Ces deux couleurs représentent ce que veut mettre en avant l’entreprise. La tradition, l'authenticité de ses créations et la convivialité.
En 1, nous avons le logo et sa déclinaison marron.
En 2, la version avatar
En 3, la version bannière
CHARTE GRAPHIQUE
Voici la charte graphique créée pour les besoins du projet. On y retrouve les couleurs, les typographies utilisées ainsi que les réseaux sociaux.
PERSONA
Voici un exemple de persona crées pour les besoins du projet. On peut y voir une courte description, les réseaux sociaux qu'ils utilisent le plus ainsi que les besoins et les frustrations. Ce persona est l'une des cibles de l'entreprise. On retrouve également l'identité visuelle de l'entreprise et les éléments graphiques qui la caractérise.
------------------------------------------------------------------------------------------------
ARBORESCENCE DU SITE WEB
Voici l'arborescence du futur site web 'Atelier Tudors'. Établir une arborescence permet de définir de manière claire et précise une hiérarchiser des pages web ainsi que leurs fonctionnalités.
Par exemple, nous arrivons sur l'accueil, on clique sur la page "Click & Collect" et cela nous donne accès à des explications sur ce qu'est le click & collect et on a également un lien qui renvoie à la page " Nos desserts" . Les pages sont interconnectées pour éviter à l'utilisateur de devoir tout le temps revenir en arrière. Cela rend la navigation simple et plus fluide.
-----------------------------------------------------------------------------------------------------------------
MAQUETTES DYNAMIQUES
Deux maquettes ont été conçue, la version mobile puis la version PC. Tout d'abord, la version wireframe mobile, c'est le squelette de la future interface d'une application mobile, d'un site web et/ou logiciel. Le wireframe est une maquette au graphisme simplifié. Ensuite, je suis passé à la version haute fidélité donc avec l'identité visuelle et la charte graphique, le logo. J'ai procédé de la même manière pour la version PC. Ci-dessous, voici des pages réalisées pour la version PC ainsi que la maquette dynamique PC faite sur figma.
CALENDRIER ÉDITORIAL & POSTS RÉSEAUX SOCIAUX
Dans le cadre de ma formation, j'ai également dû créer un calendrier éditorial et des posts destinés aux réseaux sociaux. Les réseaux sociaux choisis sont Instagram, Facebook et Youtube. Pourquoi ses réseaux ? car ils sont parmi les plus utilisées aujourd'hui avec plus de 2 milliards d'utilisateurs chacun. Ci-dessous, voici un mois de planification de posts réseaux sociaux ainsi que quelques exemples de posts destinés à Instagram et Facebook que j'ai réalisé
VIDÉO PROMOTIONNELLE
Voici la vidéo promotionnelle réalisée. Elle a pour but de promouvoir l'entreprise, ses valeurs, ce qui lui tient à coeur, le site web et les réseaux sociaux. Les vidéos sont toutes libres de droits tout comme la musique utilisée. Quant aux blocs textes, ils ont été crées avec l’extension Mister Horse. (extension pour Adobe première pro)
LES SUPPORTS PRINT
Support print n°1
Voici le premier flyer réalisé. Il s'agit d'un flyer rectangulaire avec une photo qui représente la boutique fictive de l'entreprise, le logo au centre et en couleur dorée pour rester dans une cohérence graphique. On retrouve également un court texte qui explique que l'entreprise va ouvrir un site web. Un fin cadre doré de la même couleur que le logo.
Au verso, on retrouve un QR code qui donne un accès direct au site, une flèche qui pointe vers celui-ci. Flèche que l'on retrouve sur les maquettes et le site Wordpress. Le logo "triman" qui indique que c'est recyclable et la mention légale "ne pas jeter sur la voie publique".
Support print n°2
Ceci est le deuxième support print réalisé. Il s'agit d'un flyer circulaire avec la photo qui représente la boutique fictive de l'entreprise avec une opacité jaune , le logo en haut et en marron foncé pour une meilleure lisibilité et un cercle doré pour rester dans l'identité visuelle de l'entreprise. On retrouve également le court texte explicatif qui explique que l'entreprise va ouvrir un site web. Un fin cadre doré de la même couleur que le logo.
Au verso, on retrouve un QR code qui donne un accès direct au site, une flèche qui pointe vers celui-ci. Flèche que l'on retrouve sur les maquettes et le site Wordpress. Le logo "triman" qui indique que c'est recyclable et la mention légale "ne pas jeter sur la voie publique".
Support print n°3
Ceci est le troisième support print réalisé. Il s'agit d'une carte de visite.
Au recto, le logo de couleur marron foncé pour une meilleure lisibilité. Nous avons également une bande marron avec un liseré doré pour apporter une touche de raffinement.
Au verso, on retrouve les coordonnées de la boutique physique, l'adresse du site web et des réseaux sociaux. On retrouve également la bande marron du recto et le liseré doré pour rester cohérent niveau identité visuelle. Concernant la police utilisée, il s'agit de Montserrat. La carte de visite a pour but d'être glissée dans les sacs de commande click & collect.
